<template>
  <div class="box" id="log">
        <el-scrollbar  ref="myScrollbar" id="myScrollbar">
              <div v-for="(item,index) in logs" :key="item.index">
                <div v-if="item.type === 'error'" id="errortype">
                      {{item.content}}
                </div>
                <div v-else id="othertype">
                      {{item.content}}
                </div>
              </div>
        </el-scrollbar>
  </div>
</template>

<script>
import { getLogs } from '@/api/logs/table'

export default {
  data() {
    return {
      logs: null
    }
  },

  created() {
    this.fetchSystemLog()
  },

  updated: function() {
      this.scrollDown()
    },

  methods: {
    fetchSystemLog() {
      var params = {}
      params['type'] = 0
      getLogs(params).then(response => {
        this.logs = response.data.logs
      })
    },

    scrollDown() {
       this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
    }
  }
}
</script>

<style lang="scss" scope>

  #errortype{
   color: red;
   font-size: 11pt;
  }

  #othertype{
   color: green;
   font-size: 11pt;
  }

  .box {
    width: 90%;
    height: 850px;
    margin-left: 85px;
  }

  .box .is-horizontal{
    display: none;
  }

  .box .el-scrollbar__wrap {
    overflow-y: auto;
    overflow-x: hidden;
  }

  #myScrollbar{
    margin-top: 30px;
    border:1px solid #96c2f1;background:#eff7ff;
    height: 100%;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius:10px;
  }


  .el-scrollbar__bar{
    &.is-vertical{
      width:15px;
    }
  }

</style>
